<!doctype html>
<meta charset="utf8">
<link rel="help" href="https://w3c.github.io/payment-request/#dom-paymentvalidationerrors-shippingaddress">
<title>
  PaymentValidationErrors' `shippingAddress` member (AddressErrors)
</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../payment-response/helpers.js"></script>
<script>
function retryShowsShippingAddressMember(button, error) {
  button.disabled = true;
  promise_test(async t => {
    const options = {
      requestShipping: true,
    }
    const { response } = await getPaymentRequestResponse(options);
    await response.retry({ shippingAddress: error });
    await response.complete("success");
  }, button.textContent.trim());
}
</script>
<h2>
  Manual Test for PaymentValidationErrors' `shippingAddress` member - Please run in order!
</h2>
<p>
  Click on each button in sequence from top to bottom without refreshing the page.
  Each button will bring up the Payment Request UI window.
</p>
<p>
  When presented with the payment sheet, use any card and select to "Pay".
  You will be asked to retry the payment and an error should be shown somewhere
  in the UI. The expected error string is described in each individual test.
  If you see the error, hit "Pay" again. If you don't see the error,
  abort the payment request by hitting "esc" - which means that particular test
  has failed.
</p>
<ol>
  <li>
    <button onclick="retryShowsShippingAddressMember(this, { addressLine: 'ADDRESSLINE ERROR' });">
      The payment sheet shows "ADDRESSLINE ERROR" for the shipping address' addressLine.
    </button>
  </li>
  <li>
    <button onclick="retryShowsShippingAddressMember(this, { city: 'CITY ERROR' });">
      The payment sheet shows "CITY ERROR" for the shipping address' city.
    </button>
  </li>
  <li>
    <button onclick="retryShowsShippingAddressMember(this, { country: 'COUNTRY ERROR' });">
      The payment sheet shows "COUNTRY ERROR" for the shipping address' country.
    </button>
  </li>
  <li>
    <button onclick="retryShowsShippingAddressMember(this, { dependentLocality: 'DEPENDENTLOCALITY ERROR' });">
      The payment sheet shows "DEPENDENTLOCALITY ERROR" for the shipping address' dependentLocality.
    </button>
  </li>
  <li>
    <button onclick="retryShowsShippingAddressMember(this, { organization: 'ORGANIZATION ERROR' });">
      The payment sheet shows "ORGANIZATION ERROR" for the shipping address' organization.
    </button>
  </li>
  <li>
    <button onclick="retryShowsShippingAddressMember(this, { phone: 'PHONE ERROR' });">
      The payment sheet shows "PHONE ERROR" for the shipping address' phone.
    </button>
  </li>
  <li>
    <button onclick="retryShowsShippingAddressMember(this, { postalCode: 'POSTALCODE ERROR' });">
      The payment sheet shows "POSTALCODE ERROR" for the shipping address' postal code.
    </button>
  </li>
  <li>
    <button onclick="retryShowsShippingAddressMember(this, { recipient: 'RECIPIENT ERROR' });">
      The payment sheet shows "RECIPIENT ERROR" for the shipping address' recipient.
    </button>
  </li>
  <li>
    <button onclick="retryShowsShippingAddressMember(this, { region: 'REGION ERROR' });">
      The payment sheet shows "REGION ERROR" for the shipping address' region.
    </button>
  </li>
  <li>
    <button onclick="retryShowsShippingAddressMember(this, { regionCode: 'REGIONCODE ERROR' });">
      The payment sheet shows "REGIONCODE ERROR" for the shipping address' region code.
    </button>
  </li>
  <li>
    <button onclick="retryShowsShippingAddressMember(this, { sortingCode: 'SORTINGCODE ERROR' });">
      The payment sheet shows "SORTINGCODE ERROR" for the shipping address' sorting code.
    </button>
  </li>
  <li>
    <button onclick="done();">
      Done!
    </button>
  </li>
</ol>
<small>
  If you find a buggy test, please <a href="https://github.com/web-platform-tests/wpt/issues">file a bug</a>
  and tag one of the <a href="https://github.com/web-platform-tests/wpt/blob/master/payment-request/META.yml">owners</a>.
</small>
